<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>这是一个测试页面</title>
<style>
  article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }
  .west{
    width:200px;
    padding:10px;
  }
  .north{
    height:100px;
  }
</style>
<%@ include file="/page/common.jsp" %>
</head>
<body class="easyui-layout">
  <div region="north" class="north" title="上边的">
    <h1>这里一般来说会放一个图片</h1>
  </div>
  <div region="center" title="center">
    <div class="easyui-tabs" fit="true" border="false" id="tabs">
      <div title="首页"></div>
    </div>
  </div>
  <div region="west" class="west" title="menu">
    <ul id="tree"></ul>
  </div>
  
  <div id="tabsMenu" class="easyui-menu" style="width:120px;">  
    <div name="close">关闭</div>  
    <div name="Other">关闭其他</div>  
    <div name="All">关闭所有</div>
  </div>  
  
  <script type="text/javascript">
  
  $(function () {
     
	  
	  var treeData = [{
          text : "菜单",
          children : [{
                  text : "一级菜单1",
                  attributes : {
                     // url : "http://localhost:8080/ZeYu/page/dev/nothing.jsp"
                  	url : "/page/dev/nothing.jsp"
                  }
              }, {
                  text : "一级菜单2",
                  attributes : {
                      url : "/page/bussiness/org.jsp"
                  }
              }, {
                  text : "一级菜单3",
                  state : "closed",
                  children : [{
                          text : "二级菜单1",
                          attributes : {
                              url : "/page/bussiness/org.jsp"
                          }
                      }, {
                          text : "二级菜单2",
                          attributes : {
                              url : "/page/bussiness/org.jsp"
                          }
                      }, {
                          text : "二级菜单3",
                          attributes : {
                              url : "/page/bussiness/org.jsp"
                          }
                      }
                  ]
              }
          ]
      }
  ];
	  
	    //实例化树形菜单
	    $("#tree").tree({
	    	data : treeData,
	        lines : true,
	        onClick : function (node) {
	            if (node.attributes) {
	                Open(node.text, node.attributes.url);
	            }
	        }
	    });
	    
	    //在右边center区域打开菜单，新增tab
	    function Open(text, url) {
	        if ($("#tabs").tabs('exists', text)) {
	            $('#tabs').tabs('select', text);
	        } else {
	        	var addUrl = '<%=request.getContextPath() %>'; //附加url
	        	url = addUrl+url;
	        	var content = '<iframe scrolling="auto" frameborder="0"  src="'+url+'" style="width:100%;height:100%;"></iframe>';  
	            $('#tabs').tabs('add', {
	                title : text,
	                closable : true,
	                content : content
	            });
	        }
	    }
	    
	    //绑定tabs的右键菜单
	    $("#tabs").tabs({
	        onContextMenu : function (e, title) {
	            e.preventDefault();
	            $('#tabsMenu').menu('show', {
	                left : e.pageX,
	                top : e.pageY
	            }).data("tabTitle", title);
	        }
	    });
	    
	    //实例化menu的onClick事件
	    $("#tabsMenu").menu({
	        onClick : function (item) {
	            CloseTab(this, item.name);
	        }
	    });
	    
	    //几个关闭事件的实现
	    function CloseTab(menu, type) {
	        var curTabTitle = $(menu).data("tabTitle");
	        var tabs = $("#tabs");
	        
	        if (type === "close") {
	            tabs.tabs("close", curTabTitle);
	            return;
	        }
	        
	        var allTabs = tabs.tabs("tabs");
	        var closeTabsTitle = [];
	        
	        $.each(allTabs, function () {
	            var opt = $(this).panel("options");
	            if (opt.closable && opt.title != curTabTitle && type === "Other") {
	                closeTabsTitle.push(opt.title);
	            } else if (opt.closable && type === "All") {
	                closeTabsTitle.push(opt.title);
	            }
	        });
	        
	        for (var i = 0; i < closeTabsTitle.length; i++) {
	            tabs.tabs("close", closeTabsTitle[i]);
	        }
	    }
	});
  
  </script>
</body>
</html>